<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2022-01-25 10:04:17
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-04-07 15:54:25
 * @FilePath: /uniapp_framework/src/components/layer/layer.vue
 * @Description: 页面容器组件
-->
<template>
	<view class="w-full page" :style="{ 'background': pageColor }">
		<view class="navbar" :class="showBorder ? 'show_border' : ''" :style="{
			'padding-top': statusBar +
				'px', 'background': background
		}" style="box-sizing: border-box;">

			<view class="relative flex flex-row items-center justify-center title"
				:style="{ 'height': navBarHeight + 'px', 'color': color }">
				<view v-if="showBack" class="absolute top-0 left-0 flex flex-row items-center justify-center h-full"
					style="width: 80rpx;" @click="goback">
					<u-icon name="arrow-left" size="40" :color='iconColor'></u-icon>
				</view>
				<view class="title_font" style="flex:1;padding: 0rpx 80rpx;"
				:class="position == 'center' ? 'text-center' : 'text-left'">
					{{ title }}
				</view>
				<view class="absolute top-0 right-0 flex flex-row items-center justify-center h-full">
					<slot name='suffix'></slot>
				</view>
			</view>
			<!-- <view class="title title_left" style="font-size:36rpx;" v-else
						:style="{'height':navBarHeight+'px','color':color}">{{title}}</view> -->
		</view>

		<scroll-view v-if="useScroll" scroll-y="true"
			:style="{ height: showBottom ? contentHeight2 + 'px' : contentHeight + 'px', background: bgcolor, paddingBottom: isOs && showBottom == false ? paddingBottom + 'px' : '' }"
			@scrolltolower="scrolltolower">
			<slot name="content"></slot>
		</scroll-view>
		<view class="content" v-else
			:style="{ height: showBottom ? contentHeight2 + 'px' : contentHeight + 'px', background: bgcolor, paddingBottom: isOs && showBottom == false ? paddingBottom + 'px' : '' }">
			<slot name="normal"></slot>
		</view>
		<view class="w-full bottom" :style="{ paddingBottom: isOs ? paddingBottom + 'px' : '0px', background: bottomColor }"
			v-if="showBottom" :class="showBottomShadow ? 'bottom_shadow' : ''">
			<slot name="bottom"></slot>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isOs: false,
			paddingBottom: 20, // 40
		}
	},
	props: {
		// 页面颜色
		pageColor: {
			type: String,
			default: "white"
		},
		// 内容背景颜色
		bgcolor: {
			type: String,
			default: "white"
		},
		// 标题字体颜色
		color: {
			type: String,
			default: "black",
			validator: function (value) {
				// 这个值必须匹配下列字符串中的一个
				return ['black', 'white'].indexOf(value) !== -1
			}
		},
		// 标题背景颜色
		background: {
			type: String,
		},
		// 标题
		title: {
			type: String,
			required: true
		},
		// 标题的位置
		position: {
			type: String,
			default: "center",
			validator: function (value) {
				// 这个值必须匹配下列字符串中的一个
				return ['left', 'center'].indexOf(value) !== -1
			}
		},
		// 是否显示底部栏
		showBottom: {
			type: Boolean,
			default: false
		},
		// 是否显示返回按钮
		showBack: {
			type: Boolean,
			default: true
		},
		// 是否展示navbar的下边框
		showBorder: {
			type: Boolean,
			default: false
		},
		// 是否使用  scrollview 插槽
		useScroll: {
			type: Boolean,
			default: true
		},
		// 是否显示底部栏的上部阴影
		showBottomShadow: {
			type: Boolean,
			default: false
		},
		// 图标颜色
		iconColor: {
			type: String,
			default: "black"
		},
		// 底部框颜色
		bottomColor: {
			type: String,
			default: "white"
		},
		isCustomBack: { // 是否自定义返回事件
			type: Boolean,
			default: false
		},
		customNavigateBack: { // 自定义返回事件
			type: Function
		}
	},
	created() {
		this.isOs = this.$u.os() == 'ios'
		// this.$u.toast(this.isOs)
	},
	computed: {
		statusBar() {
			const e = uni.getSystemInfoSync();
			return e.statusBarHeight;
		},
		navBarHeight() {
			const e = uni.getSystemInfoSync();
			let navBarHeight = 45
			// #ifdef MP-WEIXIN
			//获取胶囊位置信息
			let menuBottonInfo = uni.getMenuButtonBoundingClientRect();
			// 胶囊底部 - 状态栏 + 胶囊顶部 - 状态栏 = 导航栏的高度（胶囊距离顶部的距离+胶囊距离底部距离+胶囊自身的高度）
			navBarHeight = menuBottonInfo.bottom - e.statusBarHeight + (menuBottonInfo.top - e.statusBarHeight);
			// #endif
			return navBarHeight
		},
		contentHeight() {
			const e = uni.getSystemInfoSync();
			// #ifdef APP-PLUS || MP-WEIXIN
			const height = e.screenHeight // 页面高度
			// #endif
			// #ifdef H5
			const height = e.safeArea.height // 页面高度
			// #endif
			let navBarHeight = 45
			// #ifdef MP-WEIXIN
			//获取胶囊位置信息
			let menuBottonInfo = uni.getMenuButtonBoundingClientRect();
			// 胶囊底部 - 状态栏 + 胶囊顶部 - 状态栏 = 导航栏的高度（胶囊距离顶部的距离+胶囊距离底部距离+胶囊自身的高度）
			navBarHeight = menuBottonInfo.bottom - e.statusBarHeight + (menuBottonInfo.top - e.statusBarHeight);
			// #endif
			let result = height - navBarHeight - e.statusBarHeight
			if (this.isOs && this.showBottom) {
				result = result - this.paddingBottom
			}
			return result
		},
		contentHeight2() {
			const e = uni.getSystemInfoSync();
			// #ifdef APP-PLUS || MP-WEIXIN
			const height = e.screenHeight // 页面高度
			// #endif
			// #ifdef H5
			const height = e.safeArea.height // 页面高度
			// #endif
			let navBarHeight = 45
			// #ifdef MP-WEIXIN
			//获取胶囊位置信息
			let menuBottonInfo = uni.getMenuButtonBoundingClientRect();
			// 胶囊底部 - 状态栏 + 胶囊顶部 - 状态栏 = 导航栏的高度（胶囊距离顶部的距离+胶囊距离底部距离+胶囊自身的高度）
			navBarHeight = menuBottonInfo.bottom - e.statusBarHeight + (menuBottonInfo.top - e.statusBarHeight);
			// #endif
			let result = height - navBarHeight - e.statusBarHeight - 50
			if (this.isOs && this.showBottom) {
				result = result - this.paddingBottom
			}
			return result
		}

	},
	methods: {
		// 点击返回键触发的事件
		goback() {
			if (this.isCustomBack) {
				this.customNavigateBack()
			} else {
				let pages = getCurrentPages()
				if (pages.length == 1) { // 处理H5刷新后的跳转，刷新后页面栈长度为1，统一跳转到首页
					uni.switchTab({
						url: "/pages/index/index"  // 根据自己的项目情况修改跳转的路径
					})
				} else {
					uni.navigateBack()
				}
			}
		},
		// scroll-view 滚到底部触发的事件
		scrolltolower() {
			this.$emit("scrolltolower")
		}
	}
}
</script>
<style scoped>
.page {
	height: 100vh;
	overflow: hidden;
}

.bottom {
	height: 110rpx;
	box-sizing: content-box;
}

.show_border {
	border-bottom: 2rpx solid #E0E1E6;
}

.content {
	overflow: hidden;
}

.bottom_shadow {
	box-shadow: 0rpx 0rpx 24rpx 12rpx rgba(0, 0, 0, 0.1);
}
</style>